<template>
  <el-row :gutter="5">
    <el-col :span="15">
      <div>
        <el-form inline>
          <el-form-item v-for="(item, index) in formStructData" :key="index" :label="item.label"
                        :label-width="formLabelWidth" :prop="item.fieldname">
            <el-input v-if="item.type === 'input'" v-model="item.value"></el-input>
            <el-select v-if="item.type === 'select'" v-model="item.value" size="small">
              <el-option v-for="optionitem in item.data" :key="optionitem.ID" :label="optionitem.name"
                         :value="optionitem.ID"></el-option>
            </el-select>
            <el-switch v-if="item.type === 'switch'" v-model="item.value" on-text="" off-text=""></el-switch>
          </el-form-item>
        </el-form>
        <el-table
          :data="formdata"
          stripe
          highlight-current-row
          style="width: 100%" highlight-current-row>
          <el-table-column v-for="(columnData,index) in tableColumnData" :key="index" :prop="columnData.value"
                           :label="columnData.name" :width="columnData.width" :formatter="columnData.formatter">
          </el-table-column>
        </el-table>
        <div>
          <el-button type="primary" @click="save">保存</el-button>
          <el-button type="primary">取消</el-button>
          <el-button type="primary" @click="processDataStruct">生成结构数据</el-button>
        </div>
      </div>
    </el-col>
    <el-col :span="9" v-html="datastruct">
    </el-col>
  </el-row>

</template>

<script>
  import { getRemoteData, constructObjectArray, getComboBoxMap } from '../../assets/js/common.js'
  import { getTypeMap, getDataTypeMap } from '../../assets/js/GlobeDefine.js'

  export default {
    name: 'formdataprocess',
    data () {
      return {
        tableColumnData: [
          {
            value: 'index',
            name: 'index',
            width: 150,
          },
          {
            value: 'type',
            name: '控件类型',
            width: 100,
          },
          {
            value: 'cpp_type',
            name: '数据类型',
            width: 100,
          },
          {
            value: 'label',
            name: '标签名称',
            width: 100,
          },
          {
            value: 'fieldname',
            name: '字段名称',
            width: 100,
          },
          {
            value: 'visible',
            name: '是否隐藏',
            width: 100,
            formatter: this.tableFormatter,
          },
          {
            value: 'required',
            name: '必填字段',
            width: 100,
            formatter: this.tableFormatter,
          },
        ],
        formLabelWidth: '120px',
        formdata: [],//表格数据
        datastruct: '',
        formStructData: [{
          type: 'select',
          data: [],
          label: '控件类型',
          fieldname: 'type',
          value: '',
        },
          {
            type: 'input',
            label: '标签名称',
            fieldname: 'label',
            value: '',
          },
          {
            type: 'select',
            data: [],
            label: '数据类型',
            fieldname: 'cpp_type',
            value: '',
          },
          {
            type: 'input',
            label: '字段名称',
            fieldname: 'fieldname',
            value: '',
          },
          {
            type: 'input',
            label: '关联字段',
            fieldname: 'relatefield',
            value: '',
          },
          {
            type: 'switch',
            label: '是否隐藏',
            fieldname: 'visible',
            value: true,
          },
          {
            type: 'switch',
            label: '必须字段',
            fieldname: 'required',
            value: true,
          },

        ],
      }
    },
    mounted: function () {
      console.log(getDataTypeMap())
      this.formStructData[0].data = getTypeMap()
      this.formStructData[2].data = getDataTypeMap()
    },
    methods: {
      tableFormatter (row, column) {
        if (row[column.property] == true) {
          return
        }
      },
      processHtml () {
        var msg = '<div>[</div>'
        this.formdata.forEach(function (v) {
          msg += '<div>{</div>'
          for (var s in v) {
            msg += `<span>${s}:"${v[s]}",</span>`
          }
          msg += '<div>},</div>'

        })
        msg += '<div>]</div>'
        return msg

      },
      processDataStruct () {
        this.datastruct = this.processHtml()

      },
      save () {
        var obj = new Object()
        this.formStructData.forEach(function (v, i, arr) {
          obj[v.fieldname] = v.value
        })
        this.formdata.push(obj)
        this.formStructData.forEach(function (v) {
          if (v.type != 'switch') {
            v.value = ''
          }
        })
      }
    }
  }
</script>
